<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { getCoachInfo } from '@/api/training'
  import mpHtml from '@/components/mp-html/mp-html.vue'
  // const { top, bottom, height } = uni.getMenuButtonBoundingClientRect()
  // const headerHeight = (top as number) + (bottom as number) + (height as number)
  const coachInfo = ref({})
  onLoad((options:any) => {
    getCoachInfo({id:options.id}).then(res => {
      if(res.data.teachingCertificate){
        res.data.teachingCertificate = JSON.parse(res.data.teachingCertificate)
      }
      if(res.data.avatar){
        res.data.avatar = JSON.parse(res.data.avatar)
      }
      coachInfo.value = res.data
    })
  })
</script>

<template>
<!--  :style="{backgroundImage:`url(${$Prefix}/public/images/smallImage/cocah-bg.png)`}"-->
  <view class="coach-body" >
    <xx-title :placeholder="false"/>
    <block v-if="false">
      <view :style="{height:`${headerHeight}rpx`}"/>
      <view class="coach-header">
        <view class="header-left">
          <view class="header-title">{{coachInfo.name}}</view>
          <view class="header-tag" v-if="coachInfo?.categoryNames?.length > 0">
            <text v-for="item in coachInfo?.categoryNames" :key="item">
              {{item}}
            </text>
          </view>
        </view>
        <view class="header-right" v-if="coachInfo?.avatar?.length > 0">
          <image :src="coachInfo.avatar[0].fullUrl"/>
        </view>
      </view>
      <view class="coach-briefIntroduction" v-if="coachInfo?.honoraryTitles">
        荣誉头衔：{{coachInfo.honoraryTitles}}
      </view>
    </block>
<!--    :style="{marginTop:`${headerHeight}rpx`}"-->
    <view class="coach-content-body" >
<!--      <view class="coach-title">教练员简介</view>-->
      <mp-html container-style="font-size:14px;line-height:1.8;color:#505363;font-family:'SourceHanSans'" :content="coachInfo.briefIntroduction"/>
    </view>
  </view>
</template>

<style scoped lang="scss">
.coach-body{
  //min-height: 100vh;
  box-sizing: border-box;
  //padding: 20rpx;
  background-size: 100% auto;
  background-position: top;
  background-repeat: no-repeat;
  .back-icon{
    position: fixed;
    width: 48rpx;
    height: 48rpx;
    z-index: 10;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .coach-header{
    margin: 30rpx 0;
    display:flex;
    align-items:center;
    .header-left{
      width:calc(100% - 200rpx);
      .header-title{
        color: #3D3D3D;
        font-size:36rpx;
        margin-bottom:20rpx;
        font-weight:500;
      }
      .header-tag{
        font-size:28rpx;
        text{
          padding:0 10rpx;
          position: relative;
          &:before{
            content:'';
            display:block;
            position: absolute;
            height:80%;
            top: 10%;
            right:0;
            width:4rpx;
            border-radius:5rpx;
            background:#505363;
          }
          &:last-child:before{
            display:none
          }
        }
      }
    }
    .header-right{
      width:200rpx;
      height:200rpx;
      border-radius:400rpx;
      overflow: hidden;
      image{
        width:100%;
        height:100%;
      }
    }
  }
  .coach-briefIntroduction{
    margin-bottom:20rpx;
    font-size:28rpx;
    color:#505363
  }
  .coach-content-body{
    .coach-title{
      padding-left:20rpx;
      position: relative;
      font-size:28rpx;
      font-weight:500;
      color: #21252E;
      margin-bottom: 10rpx;
      &:after{
        content:'';
        display:block;
        position: absolute;
        left:0;
        width:10rpx;
        border-radius:8rpx 0 0 8rpx;
        height:60%;
        top: 20%;
        background:linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 100%), #92C75B;
      }
    }
  }
}
</style>
